<template>
  <div class="index-container">
    <el-row :gutter="20">
      <page-header />
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <TableList :listdonearr="ListDoneArr" :msgdonecount="MsgDoneCount" />
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <ListSeen :listseenarr="ListSeenArr" :msgreadcount="MsgReadCount" />
      </el-col>
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="12" :xs="24">
        <access />
      </el-col> -->
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="12" :xs="24">
        <authorization />
      </el-col> -->
      <!-- <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <version-information />
      </el-col> -->
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <china-map />
      </el-col> -->
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <my-project />
      </el-col> -->
      <!-- <icon-list /> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <ListFlow :listlowarr="ListFlowArr" :msgflowcount="MsgFlowCount" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import PageHeader from './components/PageHeader'
  /* import Plan from './components/Plan' */
  // import Access from './components/Access'
  // import Authorization from './components/Authorization'
  import ChinaMap from './components/ChinaMap'
  import IconList from './components/IconList'
  import TableList from './components/tableList'
  import ListFlow from './components/listflow'
  import ListSeen from './components/listseen'
  import { TaskListData } from '@/api/form'

  export default defineComponent({
    name: 'Index',
    components: {
      PageHeader,
      TableList,
      ListFlow,
      ListSeen,
      /*  Plan, */
      // Access,
      // Authorization,
      // ChinaMap,
      // IconList,
    },
    data() {
      return {
        ListDoneArr: [],
        ListFlowArr: [],
        ListSeenArr: [],
        MsgDoneCount: 0,
        MsgFlowCount: 0,
        MsgReadCount: 0,
      }
    },
    created() {
      this.init()
    },
    methods: {
      async init() {
        console.log('x')
        const data = await TaskListData()
        if (data.Result.Code === '200') {
          this.ListDoneArr = data.Result.Data.data.ListDone
          this.ListFlowArr = data.Result.Data.data.ListFlow
          this.ListSeenArr = data.Result.Data.data.ListSeen
          this.MsgDoneCount = data.Result.Data.data.MsgDoneCount
          this.MsgFlowCount = data.Result.Data.data.MsgFlowCount
          this.MsgReadCount = data.Result.Data.data.MsgReadCount
        }
        console.log(data)
      },
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep() {
      .page-header {
        margin-bottom: 20px;
      }

      .access,
      .authorization,
      .version-information {
        min-height: 268px;
        margin-bottom: 20px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
</style>
